<template>
  <div class="app-container">
    <van-nav-bar title="张三" left-arrow @click-left="$router.back()" />
    <div class="content-box">
      <div class="card-box info-box">
        <img class="cover" :src="require(`@/assets/images/vote/${infoData.cover}`)" alt="">
        <div class="data-box">
          <div class="data-item" v-for="(item,index) in dataItemList" :key="index">
            <div class="label">{{item.label}}</div>
            <div class="value">{{infoData[item.prop]}}</div>
          </div>
        </div>
      </div>
      <div class="card-box introduce-box">
        <div class="box-title">自我介绍</div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VoteOptionDetail',
  data() {
    return {
      dataItemList: [
        { label: '姓名：', prop: 'name' },
        { label: '职位：', prop: 'post' },
        { label: '年龄：', prop: 'age' },
      ],
      infoData: { name: '张三', age: 46, post: '广东省XX部门xx 负责人', cover: 'vote_option_cover.png' },
    };
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 70px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

.card-box {
  width: calc(100% - 30px);
  padding: 15px;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0px;
  }
}

.info-box {
  display: flex;
  .cover {
    flex: 1;
    margin-right: 15px;
  }
  .data-box {
    flex: 1;
    .data-item {
      display: flex;
      align-items: self-start;
      font-size: 15px;
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0px;
      }
      .label {
        flex-shrink: 0;
      }
      .value {
        flex: 1;
      }
    }
  }
}

.introduce-box {
  flex: 1;
  .box-title {
    border-left: 3px solid #165dff;
    padding-left: 10px;
    margin-bottom: 20px;
  }
}
</style>
